import React, { PureComponent } from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts'
import '../../util/china'
import { setTitle, scale, tooltip, mapLineStyle, mapEffectStyle } from './util/common'
import baseChart from './base-chart'
import { connect } from 'react-redux'

class ChinaMap extends PureComponent {
    constructor () {
        super()
    }

    shouldComponentUpdate (nextProps) {
        return nextProps.chinaLine !== this.props.chinaLine
    }

    renderDate = (chinaLine) => {
        const colors = ['orange', 'lime']
        const pos = {
            '杭州': {
                lonlat: [120.19, 30.26],
                color: colors[0]
            },
            '深圳': {
                lonlat: [114.06, 22.61],
                color: colors[6]
            }
        }

        return {
            citys: chinaLine.toJS().map(w => {
                return {
                    // name: 'area',
                    value: [w.longitude, w.latitude],
                    fromName: w.from,
                    toName: w.city
                }
            }),
            moveLines: chinaLine.toJS().map((w, i) => {
                return {
                    fromName: w.from,
                    toName: w.city,
                    coords: [
                        pos[w.from].lonlat,
                        [w.longitude, w.latitude]
                    ],
                    lineStyle: {
                        normal: {
                            color: pos[w.from].color,
                            shadowColor: pos[w.from].color
                        }
                    }
                }
            })

        }

    }

    componentWillUpdate (nextProps) {
        const data = this.renderDate(nextProps.chinaLine)
        this.myChart.setOption({
            series: [
                {
                    data: data.citys
                },
                {
                    data: data.citys
                },
                {
                    data: data.moveLines.map((d, i) => {
                        d.lineStyle = {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / data.moveLines.length * i))
                            }
                        }
                        return d
                    })
                },
                {
                    data: data.moveLines.map((d, i) => {
                        d.lineStyle = {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / data.moveLines.length * i))
                            }
                        }
                        return d
                    })
                },
            ]
        })
    }

    componentDidMount () {
        const {config, setChartInstance, chinaLine} = this.props
        const data = this.renderDate(chinaLine)
        this.myChart = setChartInstance(echarts.init(this.refs.chart))
        this.myChart.setOption({
            color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: 'transparent',
                        borderColor: 'rgba(255,255,255,1)',
                        borderWidth: 0.2
                    },
                    emphasis: {
                        areaColor: 'transparent',
                        borderColor: '#879EA6',
                        borderWidth: 0.2
                    }
                },
            },
            tooltip: {
                ...tooltip
            },
            series: [
                {
                    name: '地点',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {},
                    label: {
                        normal: {
                            show: false,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: function (val) {
                        return 1 * scale
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.data.toName}`
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F58158'
                        }
                    },
                    data: data.citys
                },
                {
                    name: '地点',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {},
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{b}'
                        }
                    },
                    symbolSize: function (val) {
                        return 0
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.data.toName}`
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F58158'
                        }
                    },
                    data: data.citys
                },
                {
                    name: '线路',
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 10,
                    large: true,
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return `${params.data.fromName}-${params.data.toName}`
                        }
                    },
                    effect: {},
                    lineStyle: {
                        normal: {
                            width: scale * 1,
                            opacity: 0.2,
                            curveness: 0.2,
                        }
                    },
                    data: data.moveLines.map((d, i) => {
                        d.lineStyle = {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / data.moveLines.length * i))
                            }
                        }
                        return d
                    })
                },
                {
                    type: 'lines',
                    coordinateSystem: 'geo',
                    lineStyle: {
                        normal: {
                            width: 0,
                            curveness: 0.2,
                        }
                    },
                    effect: {
                        constantSpeed: 20,
                        show: true,
                        trailLength: 0.1 * scale,
                        symbolSize: 1.5 * scale,
                        curveness: 0.2,
                    },
                    zlevel: 1,
                    data: data.moveLines.map((d, i) => {
                        d.lineStyle = {
                            normal: {
                                color: echarts.color.modifyHSL('#5A94DF', Math.round(300 / data.moveLines.length * i))
                            }
                        }
                        return d
                    })
                },
            ]
        })
    }

    render () {
        return (
            <div className="base-chart" ref="chart"/>
        )
    }

}
function mapStoreToProps ({chinaLine}) {
    return {chinaLine}
}

export default baseChart(connect(mapStoreToProps)(ChinaMap))